<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="lib/bootstrap3/css/bootstrap.css">
    <script type="text/javascript" src="lib/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="lib/jquery.cookie.js"></script>
    <script type="text/javascript" src="lib/bootstrap3/js/bootstrap.js"></script>
    <style type="text/css">
        /*notice*/
        .notice {
            padding: 20px;
            margin: 20px 0;
            border: 1px solid #eee;
            border-left-width: 5px;
            border-radius: 3px;
        }

        .notice-success {
            border-left-color: #80D651;
        }
        .notice-info {
            border-left-color: #1b809e;
        }
        .notice-warning {
            border-left-color: #aa6708;
        }
        .notice-danger {
            border-left-color: #ce4844;
        }

        /*clickable*/
        .clickable{
            cursor: pointer;
        }

        .panel-heading span {
            margin-top: -20px;
            font-size: 15px;
        }

        /*radiongroup btn*/
        .radion-group > .btn {
            margin-right: 10px;
        }
    </style>

    <script type="text/javascript">
        $(document).on('click', '.panel-heading span.clickable', function(e){
            var $this = $(this);
            if(!$this.hasClass('panel-collapsed')) {
                $this.parents('.panel').find('.panel-body').slideUp();
                $this.addClass('panel-collapsed');
                $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
            } else {
                $this.parents('.panel').find('.panel-body').slideDown();
                $this.removeClass('panel-collapsed');
                $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
            }
        });


    </script>
</head>
<body>
<!--header Start-->
<div class="header"></div>
<!--header End-->

<!--container Start-->
<div class="container">
    <div class="row">

        <!--main Start-->
        <div class="col-md-9">
            <script type="text/javascript">
                $(function() {
                    "use strict";

                    var JsonData = [];
                    var faherID = $('#form').data('id');



                    $.ajax({
                        type: "GET",
//                        async: false,
                        url: "data/item.json",
                        dataType: "json",
                        success: function (data) {

                            recursive(data,0);

                            // notice
                            $('.notice').each(function() {

                                var radiongroup = $(this).find('.radion-group');

                                radiongroup.each(function() {

                                    var radionGroup = $(this);
                                    var radions = radionGroup.find('a');
                                    var icons = radionGroup.find('.state-icon');
                                    var childID = $(this).data('id');

                                    radions.each(function() {

                                        var color = $(this).data('color');
                                        var settings = {
                                            on: {
                                                icon: 'glyphicon glyphicon-check'
                                            },
                                            off: {
                                                icon: 'glyphicon glyphicon-unchecked'
                                            }
                                        };

                                        // 事件
                                        $(this).on('click',function() {

                                            var value = $(this).data('value');

                                            radions.removeClass().addClass('btn btn-default notActive');
                                            $(this).removeClass('notActive').addClass('btn-'+color+' active');
                                            icons.removeClass().addClass('state-icon ' + settings.off.icon);
                                            $(this).find('.state-icon').removeClass().addClass('state-icon ' + settings.on.icon);


                                            var data = {
                                                'fatherId':faherID,
                                                'childID':childID,
                                                'value':value
                                            };

                                            for(var i = 0; i < JsonData.length; i++) {

                                                if(JsonData[i].fatherId == data.fatherId && JsonData[i].childID == data.childID) {

                                                    if(JsonData[i].value = data.value) {
                                                        console.log(JsonData);
                                                        return;
                                                    }else {
                                                        JsonData[i].value = data.value;
                                                        return;
                                                    }
                                                }
                                            }

                                            JsonData.push(data);
                                            console.log(JsonData);
                                            radionGroup.find('input:hidden').prop('value',value);
                                        });
                                    });

                                });
                            });
                        },
                        error: function (err) {
                            console.log("error");
                        }
                    });

                    var $form = $('#form');

                    // 递归
                    function recursive(jsonDdta,cell) {
//                        console.log(cell);
//                        console.log(jsonDdta.id+"-------"+jsonDdta.title);
//                        console.log("---------");
                        var widget = '';

                        if("children" in jsonDdta) {
                            cell++;
                            for(var i = 0; i < jsonDdta.children.length; i++) {
                                widget += recursive(jsonDdta.children[i],cell);
                            }
                            cell--;
                        }

                        if(cell == 0) {
                            $form.data('id',jsonDdta.id);
                            $form.append(widget);
                        }else if(cell == 1) {

                            return '<div>'+
                                    '<h1 class="page-header" id="'+jsonDdta.id+'">'+jsonDdta.text+'</h1>'+
                                    widget+
                                    '</div>';
                        }else if(cell == 2) {

                            return '<div class="panel panel-primary" data-id="'+jsonDdta.id+'">'+
                                    '<div class="panel-heading">'+
                                    '<h3 class="panel-title">'+jsonDdta.text+'</h3>'+
                                    '<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>'+
                                    '</div>'+
                                    '<div class="panel-body">'+
                                    widget+
                                    '</div>'+
                                    '</div>';
                        }else if(cell ==3) {

                            var taggroup = '';
                            var color = ['success','info','warning','danger','defalut','primary'];
                            if('tag' in jsonDdta) {
                                taggroup += '<div class="radion-group" data-id="'+jsonDdta.id+'">';
                                for(var i in jsonDdta.tag){

                                    taggroup += '<a class="btn btn-default notActive" data-color="'+color[i]+'" data-value="'+jsonDdta.tag[i].value+'">'+
                                    '<i class="state-icon glyphicon glyphicon-unchecked"></i>'+jsonDdta.tag[i].text+
                                    '</a>'
                                }
                                taggroup += '</div>';
                            }
                            return '<div class="notice notice-danger" data-id="'+jsonDdta.id+'">'+
                                    '<p>'+jsonDdta.text+'</p>'+
                                    taggroup+
                                    '</div>';
                        }

                    }

                });


            </script>
            <div id="form"></div>
        </div>
        <!--main End-->

        <!--slider Start-->
        <div class="col-md-3">
            <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-top">
                <ul class="nav bs-docs-sidenav">
                    <li class=""><a href="#js-overview">概览</a></li>
                    <li class=""><a href="#transitions">过渡效果</a></li>
                    <li class=""><a href="#modals">模态框</a></li>
                </ul>
            </nav>
        </div>
        <!--slider End-->

    </div>
</div>
<!--container End-->

<!--footer Start-->
<div class="footer"></div>
<!--footer End-->
</body>
</html>